<!--
 * @Author: panda
 * @Date: 2022-05-18 09:55
 * @Description: 注册组件
-->
<template>
  <form class="input" style="margin-bottom: 30px">
    <div style="padding: 10px">
      <span style="padding-right: 10px;padding-left: 10px">账号&emsp;&emsp;</span>
      <input
        type="text" class="userInput" placeholder="请输入账号" v-model="form.username"
        autocomplete="username" />
    </div>
    <el-divider style="margin: 0" />
    <div style="padding: 10px">
      <span style="padding-right: 10px;padding-left: 10px">密码&emsp;&emsp;</span>
      <input
        :type="pwdFlag?'password':'text'" class="passInput" placeholder="请输入密码"
        v-model="form.passwordHash" autocomplete="new-password" />
      <el-icon style=" vertical-align:middle;padding: 0 10px 0 10px" @click="changePwd">
        <component :is="!pwdFlag?showPw:hidePw" />
      </el-icon>
    </div>
    <el-divider style="margin: 0" />
    <div style="padding: 10px">
      <span style="padding-right: 10px;padding-left: 10px">确认密码</span>
      <input
        :type="pwd2Flag?'password':'text'" class="passInput" placeholder="请确认密码"
        v-model="form.passwordHash2" autocomplete="new-password" />
      <el-icon style=" vertical-align:middle;padding: 0 10px 0 10px" @click="changePwd2">
        <component :is="!pwd2Flag?showPw:hidePw" />
      </el-icon>
    </div>
    <el-divider style="margin: 0" />
    <div style="padding: 10px;">
      <span style="padding-right: 10px;padding-left: 10px">验证码&emsp;</span>
      <input type="text" class="captchaInput" placeholder="请输入验证码" v-model="form.captchaCode" />
      <img
        class="captcha-img"
        :src="captchaUrl"
        @click="refreshCaptchaImg"
        alt="验证码"
        :style="lockSeconds ? {cursor: 'not-allowed'} : {}" />
    </div>
  </form>
  <el-button
    type="primary" plain size="large" style="width: 100%" @click="handleRegister"
    :loading="loading">注册/登陆
  </el-button>
</template>

<script lang="ts">
import {computed, defineComponent, reactive, ref, shallowRef} from 'vue'
import {v4 as uuidv4} from 'uuid'
import {ElMessage} from "element-plus/es";
import {useUserStore} from "@/store/modules/user";
import {Hide, View} from "@element-plus/icons-vue";

export default defineComponent({
  components: {Hide, View},
  // 显示登陆，传回登陆注册弹窗
  emits: ['toLogin'],
  setup(props, context) {
    // 验证码刷新时间
    const lockSeconds = ref(0)
    // 验证码uuid
    const uuid = ref(uuidv4())
    //按钮加载中样式
    const loading = ref(false);
    //是否显示密码
    const pwdFlag = ref(true)
    //是否显示确认密码
    const pwd2Flag = ref(true)
    // 密码输入框眼睛组件图标
    const showPw = shallowRef(View)
    const hidePw = shallowRef(Hide)
    // 用户store
    const userStore = useUserStore()
    //用户表单数据
    const form = reactive({
      username: "",
      passwordHash: "",
      passwordHash2: "",
      captchaCode: ""
    })
    //获取验证码
    const captchaUrl = computed(() => {
      return (process.env.NODE_ENV === 'development' ? process.env.VUE_APP_API_HOST : '') + '/captcha?captchaId=' + uuid.value
    })

    // 切换是否显示密码眼睛
    const changePwd = () => {
      //密码标示取反即可
      pwdFlag.value = !pwdFlag.value;
    }

    // 切换是否显示确认密码眼睛
    const changePwd2 = () => {
      //密码标示取反即可
      pwd2Flag.value = !pwd2Flag.value;
    }

    // 表单验证
    const validateForm = () => {
      if (form.username === '' || form.passwordHash === '' || form.passwordHash2 === '' || form.captchaCode === '') {
        ElMessage({
          message: '表单缺项',
          type: 'error'
        })
        return;
      } else if (form.passwordHash !== form.passwordHash2) {
        ElMessage({
          message: '两次密码输入不一致',
          type: 'error'
        })
        return;
      } else {
        return [form.username, form.passwordHash, form.captchaCode];
      }
    }

    // 处理注册
    async function handleRegister() {
      const data = await validateForm();
      if (!data) return;
      try {
        loading.value = true;
        // store 验证注册表单，参数：用户名，密码，验证码，验证码uuid
        const res = await userStore.register({
          username: form.username,
          passwordHash: form.passwordHash,
        }, form.captchaCode, uuid.value);
        if (res) {

          console.log(res)
          //登陆成功后隐藏登陆注册弹窗
          context.emit('toLogin')
        }
      } catch (error) {

      } finally {
        loading.value = false;
      }
    }

    // 验证码刷新限制
    const refreshCaptchaImg = () => {
      if (lockSeconds.value) return
      lockSeconds.value = 5
      const timer = setInterval(() => {
        if (lockSeconds.value === 0) {
          clearInterval(timer)
        } else {
          lockSeconds.value--
        }
      }, 1000)
      uuid.value = uuidv4()
    }

    return {
      captchaUrl,
      refreshCaptchaImg,
      lockSeconds,
      handleRegister,
      form,
      loading,
      pwdFlag,
      showPw,
      hidePw,
      pwd2Flag,
      changePwd,
      changePwd2
    }
  }

})
</script>

<style scoped>
.input {
  border: 1px solid lightgray;
  border-radius: 20px;
  /*padding: 10px 10px;*/
  width: 100%;
}

.userInput {
  height: 30px;
  width: 70%;
  outline: none;
  border: none;
}

.passInput {
  height: 30px;
  width: 70%;
  outline: none;
  border: none;
}

.captchaInput {
  height: 30px;
  width: 40%;
  outline: none;
  border: none;
  vertical-align: middle;
}

.captcha-img {
  height: 30px;
  width: 40%;
  vertical-align: middle;
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: lightgray;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: lightgray;
  opacity: 1;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: lightgray;
  opacity: 1;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: lightgray;
}
</style>
